<!-- 登录模块 -->
<template>
	<div class="login">
		<!-- 登录模块header部分开始 -->
		<div class="login-header">
			<div class="login-header__help">{{ $t('helpCenter') }}</div>
			<div class="login-header__lang">
				<div class="lang__text" @click="showLangList = !showLangList">
					{{ langText }}
				</div>
				<div class="lang-list" v-show="showLangList">
					<div class="lang-list__item" @click="changeLang('cs')">简体中文</div>
					<div class="lang-list__item" @click="changeLang('tc')">繁体中文</div>
					<div class="lang-list__item" @click="changeLang('en')">English</div>
				</div>
			</div>
		</div>
		<!-- 登录模块header部分结束 -->
		<!-- 登陆模块主体部分开始 -->
		<div class="login-body">
			<div class="login-body-header">
				<div class="body-header__logo"></div>
				<div class="body-header__slogan">{{ $t('slogan') }}</div>
			</div>
			<!-- 登陆盒子开始 -->
			<div class="login-body-box">
				<div class="body-box-wrapper">
					<div class="box-wrapper-tabs">
						<div :class="['wrapper-tabs-item', { active: activeTab === 'msg' }]" @click="activeTab = 'msg'">
							<span>{{ $t('login.msg') }}</span>
						</div>
						<div
							:class="['wrapper-tabs-item', { active: activeTab === 'pass' }]"
							@click="activeTab = 'pass'"
						>
							<span>{{ $t('login.pass') }}</span>
						</div>
					</div>
					<div class="box-wrapper-content">
						<div v-if="activeTab === 'pass'">
							<div class="login-form">
								<div class="login-form-item">
									<div v-show="showNationCode" class="input_before__2voxqq">
										<span>+86</span>
										<div class="input_arrow__ypiplq false"></div>
									</div>
									<input
										autocomplete="off"
										type="text"
										:placeholder="$t('login.p_phone')"
										@input="handlePhoneChange"
									/>
								</div>
								<div class="login-form-item">
									<input
										autocomplete="off"
										:type="password_type"
										:placeholder="$t('login.p_pass')"
										@input="handlePassChange"
									/>
									<div class="input_after__3ohooa" @click.stop="togglePass">
										<span :class="['input_icon__ewiea9', { 'input_off__3o-wkn': showPass }]"></span>
									</div>
								</div>
								<div v-if="showError" class="login-form-error">帐号或密码错误,请重新输入 (1012101)</div>
								<div v-if="!showLoginBtn" class="login-form-btn--disable">
									{{ $t('login.loginText') }}
								</div>
								<div v-else class="login-form-btn--able" @click.stop="handleSubmit">
									{{ $t('login.loginText') }}
								</div>
							</div>
						</div>
						<div v-else></div>
					</div>
				</div>
			</div>
			<!-- 登陆盒子结束 -->
		</div>
		<!-- 登陆模块主体部分结束 -->
		<!-- 登陆模块底部部分开始 -->
		<div class="footer_wrapper__gbtyuw">
			<div class="base_footer_link__3rxyoz">
				<span>{{ $t('login.policy') }}</span>
			</div>
			<p class="footer_copyright__3blxo0">
				<span></span>{{ $t('login.backup') }}<span>{{ $t('login.contact') }}</span>
			</p>
		</div>
		<!-- 登陆模块底部部分结束 -->
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapState, mapGetters, mapActions, createNamespacedHelpers } from 'vuex'
let loginNS = createNamespacedHelpers('login')
console.log(loginNS)
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		//这里存放数据
		return {
			showPass: false,
			showLangList: false, // 用来显示语言列表
			// count: 1,
			activeTab: 'pass', //pass
			username: '',
			password: '1234',
			password_type: 'password',
			showError: false,
		}
	},
	//监听属性 类似于data概念
	computed: {
		showNationCode: function () {
			return this.username.length >= 6 ? true : false
		},
		showLoginBtn: function () {
			if (!!this.username && !!this.password) {
				return true
			} else {
				return false
			}
		},
		...loginNS.mapState(['lang']), // this.$store.state.login.lang
		...mapState(['count']),
		...mapGetters(['totalPrice']),
		langText: function () {
			// console.log(this.$i18n.locale)
			let text = ''
			switch (this.$i18n.locale) {
				case 'tc':
					text = '繁体中文'
					break
				case 'en':
					text = 'English'
					break
				case 'cs':
					text = '简体中文'
					break
				default:
					text = '简体中文'
					break
			}
			return text
		},
	},
	// computed: mapState(['count']),
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		togglePass: function () {
			this.showPass = !this.showPass
			this.password_type = this.password_type === 'password' ? 'text' : 'password'
		},
		handleSubmit: function () {
			// this.$store.dispatch('user/save_token_sync', {
			// 	username: this.username,
			// 	password: this.password,
			// })
			// 登录请求 发送
			this.$axios
				.post('/user/login', {
					username: this.username,
					password: this.password,
				})
				.then((res) => {
					console.log(res)
					// 如果登录成功，
					// 1. 跳转到我的页面中
					// 2. token 存到 vuex 中，方便其它页面或者组件需要的时候，可以从 vuex 中获取
					if (res.code == 1) {
						this.showError = false
						this.$store.commit('user/SAVE_TOKEN', {
							token: res.data.token,
						})
						this.$router.push('/my')
					} else {
						this.showError = true
					}
				})
		},
		handlePassChange: function (e) {
			this.password = e.target.value
		},
		handlePhoneChange: function (e) {
			console.log(e.target.value)
			this.username = e.target.value
		},
		// this.increaseSync(payload) => this.$store.dispatch('increaseSync',payload)
		...mapActions(['increaseSync']),
		handleAdd: function () {
			// this.$store.state.count++
			console.log(this.$store)
			// this.$store.dispatch(type,payload)
			// this.$store.dispatch('increaseSync', {
			// 	num: 1,
			// })
			this.increaseSync({ num: 1 })
		},
		changeLang: function (lang) {
			// 隐藏语言选择的菜单
			this.showLangList = false
			// 设置语言
			this.$i18n.locale = lang // cs tc en
			// 修改存到仓库 login 模块中  lang中
			this.$store.dispatch('login/changeLang', {
				lang,
			})
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {
		// console.log(this.$store.state.count)
		// console.log(this.$store.state.login.lang)
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		//方法1: 直接生成一个验证码对象。
		// try {
		// 	var captcha1 = new TencentCaptcha('2057644568', callback)
		// 	captcha1.show() // 显示验证码
		// } catch (error) {
		// 	loadErrorCallback()
		// }
		//方法2:绑定一个元素并自动识别场景id和回调。
		// try {
		// 	// 绑定一个元素并自动识别场景id和回调
		// 	// 验证码会读取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可选)自动初始化
		// 	new TencentCaptcha(document.getElementById('TencentCaptcha'))
		// } catch (error) {
		// 	loadErrorCallback()
		// }
		//方法3：绑定一个元素并手动传入场景Id和回调。
		// try {
		// 	new TencentCaptcha(document.getElementById('TencentCaptcha'), 'CaptchaAppId', callback, {
		// 		bizState: '自定义透传参数',
		// 	})
		// } catch (error) {
		// 	loadErrorCallback()
		// }
		// 	function callback(res) {
		// 		/* res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
		//    res（客户端出现异常错误 仍返回可用票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
		//    res（用户主动关闭验证码）= {ret: 2}
		// */
		// 		if (res.ticket) {
		// 			// 上传票据 可根据errorCode和errorMessage做特殊处理或统计
		// 		}
		// 	}
		// 	// 验证码js加载错误处理
		// 	function loadErrorCallback() {
		// 		var CaptchaAppId = ''
		// 		/* 生成票据或自行做其它处理 */
		// 		var ticket = 'terror_1001_' + CaptchaAppId + Math.floor(new Date().getTime() / 1000)
		// 		callback({
		// 			ret: 0,
		// 			randstr: '@' + Math.random().toString(36).substr(2),
		// 			ticket: ticket,
		// 			errorCode: 1001,
		// 			errorMessage: 'jsload_error',
		// 		})
		// 	}
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.login {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	.login-header {
		height: 1.38889rem;
		padding: 0 0.66667rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.login-header__help {
			color: #7f7f7f;
			font-size: 0.38889rem;
			margin-left: 0.75rem;
			cursor: pointer;
			transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
		}

		.login-header__lang {
			position: relative;
			margin-left: 0.75rem;
			.lang__text {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				color: #7f7f7f;
				font-size: 0.38889rem;
				cursor: pointer;
				transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
				&::after {
					content: '';
					height: 0;
					width: 0;
					border: 0.13889rem solid transparent;
					border-top-color: #7f7f7f;
					margin-left: 0.27778rem;
					margin-bottom: -0.05556rem;
					display: inline-block;
				}
			}
			.lang-list {
				position: absolute;
				background: #fff;
				border-radius: 0.13889rem;
				box-shadow: 0 0 0.13889rem #d3d3d3;
				right: 0;
				top: 0.88889rem;
				width: 3.05556rem;
				z-index: 10;
				.lang-list__item {
					height: 1.11111rem;
					padding: 0.13889rem 0.55556rem;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-align: center;
					align-items: center;
					-ms-flex-pack: center;
					justify-content: center;
					-ms-flex-direction: row;
					flex-direction: row;
					white-space: nowrap;
					color: #7f7f7f;
					font-size: 0.38889rem;
					cursor: pointer;
					transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
				}
			}
		}
	}
	.login-body {
		flex: 1;
		.login-body-header {
			padding-bottom: 1.36111rem;
			margin-bottom: -82px;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-align: center;
			align-items: center;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-direction: column;
			flex-direction: column;
			padding-top: 0.55556rem;
			padding-bottom: 0.83333rem;
			margin-bottom: 0;
			.body-header__logo {
				width: 4.25rem;
				height: 0.69444rem;
				margin-bottom: 0.41667rem;
				background-image: url();
				background-repeat: no-repeat;
				background-position: 50%;
				background-size: 100% 100%;
			}

			.body-header__slogan {
				font-size: 0.33333rem;
				font-weight: 500;
				padding: 0 0.66667rem;
				text-align: center;
			}
		}
		.login-body-box {
			margin: 0 auto;
			.body-box-wrapper {
				position: relative;
				padding: 0.55556rem 0.66667rem 0.66667rem;
				.box-wrapper-tabs {
					margin-bottom: 0.88889rem;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-align: center;
					align-items: center;
					-ms-flex-pack: center;
					justify-content: center;
					-ms-flex-direction: row;
					flex-direction: row;
					margin-bottom: 20px;
					overflow: hidden;
					.active {
						color: #000 !important;
					}
					.wrapper-tabs-item {
						position: relative;
						height: 0.77778rem;
						padding: 0 0.27778rem;
						flex: 1 1;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-align: center;
						align-items: center;
						-ms-flex-pack: center;
						justify-content: center;
						height: 34px;
						cursor: pointer;
						white-space: nowrap;
						box-sizing: border-box;
						padding: 0 10px;
						color: rgba(0, 0, 0, 0.5);
						&:first-child::after {
							content: '';
							height: 0.33333rem;
							border-right: 1px solid rgba(0, 0, 0, 0.1);
							position: absolute;
							right: 0;
							top: 50%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
						}
						span {
							line-height: 0.77778rem;
							font-size: 0.44444rem;
						}
					}
				}
				.box-wrapper-content {
					.login-form {
						.login-form-item {
							display: flex;
							width: 100%;
							height: 45px;
							background: #f7f7f7;
							border-radius: 9px;
							.input_before__2voxqq {
								height: 1.22222rem;
								height: 45px;
								padding: 0 0.27778rem;
								display: -ms-flexbox;
								display: flex;
								-ms-flex-align: center;
								align-items: center;
								-ms-flex-pack: center;
								justify-content: center;
								-ms-flex-direction: row;
								flex-direction: row;
								position: relative;
								box-sizing: border-box;
								span {
									font-size: 0.38889rem;
									min-width: 1.11111rem;
									text-align: center;
									font-size: 12px;
								}

								.input_arrow__ypiplq {
									background-image: url();
									background-repeat: no-repeat;
									background-position: 50%;
									background-size: auto 100%;
									width: 0.38889rem;
									height: 0.66667rem;
									transition: -webkit-transform 0.2s ease-in;
									transition: transform 0.2s ease-in;
									transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
									&::after {
										content: '';
										height: 0.33333rem;
										border-right: 1px solid rgba(0, 0, 0, 0.1);
										position: absolute;
										right: 0;
										top: 50%;
										-webkit-transform: translateY(-50%);
										transform: translateY(-50%);
									}
								}
							}
							.input_after__3ohooa {
								height: 1.22222rem;
								width: 0.94444rem;
								padding-right: 0.27778rem;
								margin-left: -0.13889rem;
								height: 45px;
								box-sizing: border-box;
								width: 35px;
								padding-right: 11px;
								margin-left: -4px;
								cursor: pointer;
								display: -ms-flexbox;
								display: flex;
								-ms-flex-align: center;
								align-items: center;
								-ms-flex-pack: center;
								justify-content: center;
								-ms-flex-direction: row;
								flex-direction: row;
								.input_off__3o-wkn {
									background-image: url() !important;
								}
								.input_icon__ewiea9 {
									width: 0.66667rem;
									height: 0.66667rem;
									width: 24px;
									height: 24px;
									background-image: url();
									background-repeat: no-repeat;
									background-position: 50%;
									background-size: 100% 100%;
								}
							}
							input {
								outline: none;
								border: none;
								background-color: #f7f7f7;
								border-radius: 0.19444rem;
								height: 1.22222rem;
								padding: 0.27778rem 0.41667rem;
								font-size: 0.38889rem;
								line-height: 0.66667rem;
								width: 100%;
							}
							margin-bottom: 0.1rem;
						}
						.login-form-error {
							color: #ec5b66;
							font-size: 0.33333rem;
							padding: 0.55556rem 0 0;
							margin-bottom: -0.33333rem;
							text-align: center;
						}
						.login-form-btn--able {
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0.75rem auto 0;
							background-color: #2ad181;
							color: white;
							border-radius: 0.27778rem;
							font-size: 0.38889rem;
							height: 1.22222rem;
						}
						.login-form-btn--disable {
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0.75rem auto 0;
							background-color: #c0f1d9;
							color: white;
							border-radius: 0.27778rem;
							font-size: 0.38889rem;
							height: 1.22222rem;
						}
					}
				}
			}
		}
	}

	.footer_wrapper__gbtyuw {
		padding: 0.83333rem 0.66667rem;
		padding: 20px;
		text-align: center;
		color: #9b9b9b;
		font-size: 0.33333rem;
		.base_footer_link__3rxyoz {
			font-size: 0.38889rem;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-align: center;
			align-items: center;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-direction: row;
			flex-direction: row;
			color: #5a6e97;
			margin: 0 0 0.27778rem;
			span {
			}
		}

		.footer_copyright__3blxo0 {
			padding: 20px;
			text-align: center;
			color: #9b9b9b;
			font-size: 0.33333rem;
			span {
			}
		}
	}
}
</style>
